<template>
    <div class="workbench-wrap">
        <flexbox wrap="wrap" align="flex-start">
            <div style="width: calc(99% - 300px); display: flex; flex-direction: column">
                <flexbox align="flex-start" style="background: #fff; padding: 6px 24px 13px 24px">
                    <div style="flex: auto">
                        <SysSet :isHasSystemOption="false" @success="sysSetChange" />
                    </div>
                    <div style="flex-shrink: 0; font-size: 14px; margin: 13px 0 0 8px; cursor: pointer">
                        <SwapOutlined />
                        <span class="margin-l-8" @click="handleSwitch">{{ isBoard ? '切换规划看板' : '切换跟踪看板' }}</span>
                    </div>
                </flexbox>
                <div style="margin-top: 12px; flex: 1" v-if="system">
                    <ProcessBoard v-if="isBoard" />
                    <Desktop :system="system" :systemInfo="systemInfo" v-else />
                </div>
                <flexbox
                    justify="center"
                    style="margin-top: 12px; height: calc(100vh - 135px); background: #fff"
                    v-if="!(allSysList && allSysList.length)"
                >
                    <a-empty :image="require('@/assets/images/guidePc.png')" :imageStyle="{ height: '200px' }" />
                </flexbox>
            </div>
            <person-statistics style="width: 300px; margin-left: 1%" />
        </flexbox>
    </div>
</template>

<script lang="ts">
import PersonStatistics from './components/PersonStatistics.vue';
import { SwapOutlined } from '@ant-design/icons-vue';
import ProcessBoard from './components/ProcessBoard/index.vue';
import Desktop from './components/Desktop/index.vue';
import store from '@/store';
import { defineComponent, reactive, toRefs } from 'vue';
import { SysSet } from '@/components';
export default defineComponent({
    name: 'workbench',
    components: {
        PersonStatistics,
        ProcessBoard,
        Desktop,
        SysSet,
        SwapOutlined
    },
    setup() {
        const state = reactive<any>({
            isBoard: false,
            system: null,
            systemInfo: null,
            allSysList: []
        });
        const handleSwitch = () => {
            state.isBoard = !state.isBoard;
        };
        const sysSetChange = (n, systemInfo) => {
            state.system = n;
            state.systemInfo = systemInfo;
        };
        // 获取我的所有系统
        const getAllSystem = async () => {
            state.allSysList = store.getters.dicOptions.mySystem.map((item) => ({
                ...item,
                system: item.systemName,
                systemId: item.id,
                checked: false
            }));
        };
        getAllSystem();
        return {
            ...toRefs(state),
            handleSwitch,
            sysSetChange
        };
    }
});
</script>
<style lang="less" scoped>
.workbench-wrap {
    margin: 12px;
    .section + .section {
        margin-top: 16px;
    }
}
</style>
